<template>
  <div class="flex items-center w-600px mt-18px" v-if="total > 0">
    <div
      class="w-20px h-20px mr-12px cursor-pointer"
      :class="{ '!cursor-not-allowed opacity-50': currentPage === 1 }"
      @click="handleChange(currentPage - 1)"
    >
      <img class="w-full h-full" src="@/assets/hot-left.png " alt="" />
    </div>
    <div class="mr-12px">
      <ul class="flex items-center">
        <li
          class="m-6px w-26px h-26px rounded-4px bg-white border flex justify-center items-center cursor-pointer"
          :class="{ '!bg-[#6b39ff] text-white': currentPage === i }"
          v-for="i in page"
          :key="i"
          @click="handleChange(i)"
        >
          {{ i }}
        </li>
      </ul>
    </div>
    <div
      class="w-20px h-20px mr-12px cursor-pointer"
      :class="{ '!cursor-not-allowed opacity-50': currentPage === page }"
      @click="handleChange(currentPage + 1)"
    >
      <img class="w-full h-full rotate-180" src="@/assets/hot-left.png " alt="" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watchEffect } from 'vue'
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 10
  },
  currentPage: {
    type: Number,
    default: 1
  }
})
const emit = defineEmits(['change'])
const currentPage = ref(1)
const page = computed(() => (props.total > 0 ? Math.ceil(props.total / props.pageSize) : 0))
const handleChange = (e) => {
  if (e < 1 || e > page.value) return
  currentPage.value = e
  emit('change', e)
}
watchEffect(() => {
  currentPage.value = props.currentPage
  console.log(props.total, props.pageSize, page?.value)
})
</script>
<style lang="less" scoped></style>
